/*
Write your variables here. All available variables can be
found in element-plus/packages/theme-chalk/src/common/var.scss.
For example, to overwrite the theme color:
*/
$--color-primary: hotpink;

/* icon font path, required */
$--font-path: '~element-plus/lib/theme-chalk/fonts';

@import '~element-plus/packages/theme-chalk/src/index';

$bg-color1: transparent;
$bg-color2: transparent;
$bg-color3: #fff;
$bg-color4: #f5f7fa;
$nbg-color1: transparent;
$nbg-color2: #3e8ef7;
$nbg-color3: transparent;
$nbg-color4: #fff;
$dis-bg-color1: #eee;

$text-theme1: #1f9fff; // 流程图颜色
$main-color: #333;

/* 字体色 */
$text-color1: #333;
$text-color2: #333;
$text-color3: #6070a0;
$text-color5: #8ec1ff;
$ntext-color2: #cfd2df;
$ntext-color3: #333;
$ntext-color4: #3d94dd;
$text-white: #fff;
$text-color6: #f6f9ff;

$n-text-color1: #6097cf;
$menu-t-color: #a1adb4;

$disabled-text-color1: #656b84;

// 其他辅助色
$other-color1: #97a8be;
$other-color2: #83a6b140;
$other-color3: #3e8ef7;
$other-color-much-stab: #1e36b3;
$other-color-close: #59c8ff;

// 分隔边 下边
$other-btn-border: 1px solid #4e5166;
$other-border-color: #fff;

// $border-color1: #3f4a77;
$border-color1: #ebebeb;
$nborder-color1: #dcdfe6;
$nborder-color2: #5185a3;

$input-tag1: #3d4050;

// date
$date-range-color: #f2f6fc;
$date-dis-color: #343b54;
$date-select-color1: #3e8ef7;
$date-select-color2: #35ac90;
$date-input-bg: #6070a0;

// 主按钮颜色
$btn-color: #3e8ef7;
$btn-color2: #70b1ff;

// 间隔 距离
$px-distance-xs: 5px;
$px-distance-sm: 10px;
$px-distance-md: 15px;
$px-distance-lg: 20px;

$input-sm: 140px;
$input-md: 240px;
$input-lg: 365px; // 长选择框
$input-xl: 400px; // 关联日期选择

$alarm: #ff5959;

//sidebar
$menuBg: #263238;
$subMenuBg: #263238;
$menuHover: #192039;

// 暗色样式下   颜色配置
$an-text-color2: #bcc3df;
$an-bg-color1: #252c47;
$an-bg-color2: #192039;
$an-bg-color4: #3a487c;
$an-bg-color6: #11172a;

$an-text-color1: #ffffff;
$an-text-color4: #bcc3df;

$an-date-dis-color: #343b54;
$an-disabled-text-color1: #656b84;
$an-other-color-much-stab: #1e36b3;
$an-other-color-close: #59c8ff;
$an-input-tag1: #4972bd;
$an-border-color1: #3f4a77;
$an-other-btn-border: 1px solid #354eb1;

.app-custom {
  // background-color: $bg-color2;
  color: $text-color1;

  .app-wrapper {
    /// 菜单
    .sidebar-container {
      // el-menu {
      //   background: $bg-color2;
      // }
    }

    /// 界面
    .main-container {
      /// 顶导航
      .navbar {
        border-bottom: 1px solid $bg-color1;

        span {
          // color: $n-text-color1;
        }

        .el-badge__content {
          border-color: $bg-color1;
        }

        //navbar下 横向菜单样式  覆盖
        // .scrollbar-wrapper {
        //   .el-scrollbar__view {
        //     width: 100%;
        //     height: 100%;
        //     display: flex;
        //     padding: 6px 10px;
        //     align-items: center;

        //     .abs_contain {
        //       width: calc(100% - 60px);
        //       margin: 0 10px;
        //       height: 100%;
        //       margin-top: 6px;
        //       font-weight: 600;
        //       overflow: hidden;
        //       overflow-x: auto;
        //       letter-spacing: 1px;
        //       transition: all 1s linear;

        //       .el-menu {
        //         transition: .3s;
        //         width: fit-content;
        //         align-items: center;
        //         margin: 0 auto 0 0;

        //         .menu-wrapper {

        //           .el-menu-item,
        //           .el-submenu__title {
        //             padding: 0;
        //             display: flex;
        //             margin-top: 16px;
        //             background: transparent !important;

        //             .title-text {
        //               color: $menu-t-color;
        //               line-height: 32px;
        //               font-size: 20px;
        //               padding: 0 15px;
        //               height: 32px;
        //               font-weight: normal;
        //               font-family: PingFangSC-Semibold;

        //               &:hover {
        //                 // color: #fff;
        //                 // background: url(./other/menu-btn-active.png) center center no-repeat;
        //                 background-size: 100% 30px;
        //               }

        //               &::before {
        //                 display: inline-block;
        //                 margin-right: 5px;
        //               }

        //               // background: url(./other/menu-btn.png) center center no-repeat;
        //               background-size: 100% 30px;
        //             }

        //             i {
        //               color: transparent;
        //             }
        //           }

        //           .is-active {
        //             .title-text {
        //               color: #fff;
        //               // background: url(./other/menu-btn-active.png) center center no-repeat;
        //               background-size: 100% 30px;
        //             }
        //           }
        //         }
        //       }
        //     }
        //   }
        // }
      }

      /// 主内容
      .app-main {
        /// 公共的 ====================

        // 滚动条
        div,
        ul {
          &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 10px;
          }

          &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background: $other-color3;
          }

          &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 10px;
            background: $other-color2;
          }
        }

        // 主样式 按钮
        .el-button--primary {
          background-color: $btn-color;
          background: #3e8ef7;
          border-color: $btn-color;
          color: #fff;
        }

        .el-button--danger {
          background: #ff3838;
        }

        .el-button {
          height: 48px;
          font-size: 16px;
          border-radius: 2px;

          &.el-button--mini {
            height: 40px;
          }
        }

        .el-button--text {
          color: $text-color5;
        }

        // input number
        .el-input-number {
          .el-input-number__decrease {
            color: $text-color2;
            // height: 100%;
            border-color: $bg-color1;
            border: none;
            // background-color: $date-dis-color;

            .is-disabled {
              color: $disabled-text-color1;
            }
          }

          .el-input-number__increase {
            color: $text-color2;
            border-color: $bg-color1;
            // background-color: $date-dis-color;
          }
        }

        // treeSelect
        .vue-treeselect {
          .vue-treeselect__control {
            border: 1px solid $border-color1;
            background: $nbg-color1; // $bg-color1;

            .vue-treeselect__input {
              background: $bg-color1;
              border: none;
            }

            .vue-treeselect__single-value {
              color: $text-color1;
            }

            .vue-treeselect__multi-value-item {
              color: $text-color1;
              background: $date-range-color;

              .vue-treeselect__value-remove {
                color: #a0a6c5;
                border-left: 0px;
              }
            }
          }

          .vue-treeselect__menu-container {
            .vue-treeselect__menu {
              background: $nbg-color4; // $bg-color1;
              color: $text-color2;
              border-color: $border-color1;

              label {
                font-weight: 400;
              }
            }

            // background-color: #494D63;
            // border-radius: 4px;
            // border-color: #8488A0;
            .vue-treeselect__option--highlight {
              background-color: $nbg-color1; // $bg-color2;
              // background-color: #494D63; // $bg-color2;
            }

            .vue-treeselect__option--selected {
              background-color: $nbg-color1; // $bg-color2;
              // background-color: #494D63; // $bg-color2;
              color: $text-color1;

              label {
                font-weight: 600;
              }
            }
          }
        }

        // el-select 下拉选择, date 日期选择
        .el-select,
        .el-date-editor {
          .el-input__suffix {
            color: $text-color1;
          }

          .el-range-input {
            background-color: $bg-color1;
            color: $text-color1;
          }

          .el-range-separator {
            line-height: 40px;
            color: $text-color1;
          }

          .el-tag {
            // background-color: $input-tag1;
          }

          .el-tag--info {
            color: $text-color1;
          }

          .el-icon-close {
            // background: $bg-color2;
          }

          .el-input__inner {
            // height: 48px;
          }
        }

        .el-input__inner {
          // background-color: $bg-color1;
          // background-color: $nbg-color1;
          background: #fff;
          color: $text-color1;
          // color: #CFD2DF;
          // height: 48px;

          // border-color: $date-range-color;
          // border: none;
          &:focus {
            border-color: $border-color1;
          }
        }

        .tree-filter-box .el-input__inner {
          font-size: 16px;
          height: 48px;
        }

        .el-input__suffix .inputUnit {
          line-height: 48px;
          font-style: normal;
          font-size: 16px;
        }

        .filter-input .el-input__inner {
          height: 48px;
          font-size: 16px;
        }

        .filter-input {
          .el-form-item {
            margin-right: 16px;
            margin-bottom: 16px;
          }
        }

        .el-input.is-disabled {
          .el-input__inner {
            background-color: $dis-bg-color1;
            color: $text-color2;
            border-color: $nborder-color1; // $border-color1;

            &:hover {
              background-color: $dis-bg-color1;
              color: $text-color2;
              border-color: $border-color1;
            }
          }
        }

        // 联动选择
        .el-cascader__label {
          color: $text-color1;
        }

        .dialogform {
          .el-input__inner {
            height: 48px;
          }
        }

        // .el-form {
        //   .el-input__inner, .el-input-number__decrease {
        //     border: 1px solid $date-range-color;
        //   }
        // }

        // card 卡片
        .el-card {
          color: $text-color1;
          // border: 1px solid $bg-color1;
          background-color: #fff;
          // box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.1);
        }

        // 复选框
        .el-checkbox {
          color: $text-color1;

          .el-checkbox__inner {
            // background-color: #494D63;
            border-radius: 4px;
            border-color: #dcdfe6;
          }

          .is-checked {
            .el-checkbox__inner {
              background-color: $nbg-color2;
              border-color: $other-color1;
            }
          }

          .el-checkbox__input.is-checked + .el-checkbox__label {
            color: $text-color1;
          }

          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: $nbg-color2;
          }
        }

        .el-icon-loading,
        .el-loading-text {
          color: $text-color1;
        }

        /// 单独组件 =============================================================

        // 首页
        .home-wrapper {
          .msg {
            color: $text-color1;
          }
        }

        // 综合数据
        .home-wrapper {
          .card-list {
            margin-bottom: $px-distance-lg;
          }

          .lineChart {
            background-color: $bg-color1;
            padding-top: $px-distance-md;
          }
        }

        // 告警
        .alarm-info-bar {
          .unsolved-alarm {
            border-color: #ff7575;
          }
        }

        .alarm {
          color: $alarm;
        }

        // 搜索栏
        // dataVisualization 下 日期时间选择
        .search-bar {
          margin: 10px 0;

          // color: $text-color1;
          .search-bar-container {
            .el-select:first-child {
              margin-left: 0;
            }
          }

          .ymda-time-select-container {
            .el-select:first-child {
              margin-left: $px-distance-md;
            }
          }

          .el-select {
            margin-left: $px-distance-md;
            margin-right: 0;
          }

          .ymda-time-select-container {
            margin-right: $px-distance-md;

            .el-date-editor {
              margin-left: $px-distance-md;
              width: $input-sm;
            }

            .el-range-editor {
              margin-left: $px-distance-md;
              width: $input-md;
            }
          }

          .query-list-container {
            .query-list {
              margin-bottom: $px-distance-sm;
            }
          }
        }

        // 账号管理 title
        .account-manage-warpper {
          .el-form-item__content {
            h2 {
              color: $text-color1;
            }
          }
        }

        // 远程抄表 彩虹table
        .table-usage-level {
          table {
            tr {
              .cell {
                color: $text-color1;
              }
            }

            .six {
              td {
                background-color: #d82d33;
              }
            }

            .five {
              td {
                background-color: #db5055;
              }
            }

            .four {
              td {
                background-color: #e7874a;
              }
            }

            .three {
              td {
                background-color: #efc048;
              }
            }

            .two {
              td {
                background-color: #a9d648;
              }
            }

            .one {
              td {
                background-color: #45cc61;
              }
            }
          }
        }

        // 彩虹按钮
        .color-notifer {
          .el-tag {
            color: $text-color1;
          }

          .six {
            background-color: #d82d33;
          }

          .five {
            background-color: #db5055;
          }

          .four {
            background-color: #e7874a;
          }

          .three {
            background-color: #efc048;
          }

          .two {
            background-color: #a9d648;
          }

          .one {
            background-color: #45cc61;
          }
        }

        .tree-form-tree-container {
          max-width: 800px;
          margin: 0 auto;
        }

        // 上报输入框
        .report-setting-container {
          .el-input__inner {
            border: 1px solid $date-range-color;
          }
        }

        // 设备协议管理
        .device-protocol-container {
          .table-container {
            .el-table__header-wrapper {
              .is-right {
                .cell {
                  padding-right: 20px;
                }
              }
            }
          }
        }

        // .gateway-manage-container {
        //   .filter-container {
        //     .el-button--default {
        //       color: $btn-color;
        //     }
        //   }
        // }
      }
    }
  }
}

/* ------- 公共下拉 覆盖 --------  ================================== */

.app-body-dark {
  font-weight: 400;
  // background: url(./other/bg.jpg) center center no-repeat;
  background: #f1f4f5;
  background-size: 100% 100%;
  color: #0094bf;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: $other-color3;
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: $other-color2;
  }

  // 滚动条
  div,
  ul {
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 10px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background: $other-color3;
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 10px;
      background: $other-color2;
    }
  }

  // 滚动条 原ul
  #menu-box {
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 0px;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      // background: #868d9e;
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 10px;
      // background: #d3d3d3;
    }

    &:hover {
      &::-webkit-scrollbar {
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
      }
    }
  }

  // 下拉的三角
  .el-popper[x-placement^='bottom'] {
    .popper__arrow {
      border-bottom-color: $border-color1;

      &:after {
        border-bottom-color: $border-color1; // $bg-color1;
      }
    }
  }

  .el-popper[x-placement^='top'] {
    .popper__arrow {
      border-top-color: $border-color1;

      &:after {
        border-top-color: $border-color1; // $bg-color1;
      }
    }
  }

  .el-popper[x-placement^='left'] {
    .popper__arrow {
      border-left-color: $border-color1;

      &:after {
        border-left-color: $border-color1;
      }
    }
  }

  .el-popper[x-placement^='right'] {
    .popper__arrow {
      border-right-color: $border-color1;

      &:after {
        border-right-color: $border-color1;
      }
    }
  }

  .iconfont {
    font-size: inherit;
  }

  // 菜单下拉
  .el-menu--horizontal {
    .el-menu--popup {
      // background-color: #2A2D3E !important;
      // border: 1px solid #2683BC;
      // box-shadow: inset 0 0 20px 2px rgba(0, 147, 255, 0.6);

      a {
        .el-menu-item {
          font-size: 12px;
          color: $menu-t-color !important;

          &:hover,
          &:focus {
            color: $text-color1 !important;
            background-color: #3d4050 !important;
          }
        }

        .el-menu-item.is-active {
          color: $text-color1 !important;
          // background-color: #3D4050 !important;
        }
      }
    }
  }

  // 菜单下拉
  .el-cascader__dropdown {
    // background-color: #333647 !important;
    // border-color: #404354;

    .el-cascader-node {
      &:hover {
        background-color: #f5f7fa !important;
      }
    }

    .in-active-path {
      background-color: #f5f7fa !important;
    }
  }

  // 面包屑
  .app-breadcrumb {
    .el-breadcrumb__inner,
    .el-breadcrumb__separator {
      color: $ntext-color2;
      font-size: 14px;
    }

    .no-redirect {
      color: $ntext-color2;
      font-size: 14px;
    }
  }

  // select 下拉选择
  .el-select-dropdown,
  .el-select-dropdown.is-multiple {
    background-color: $bg-color3;
    border: none;
    // border: 1px solid $other-border-color;
    // box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.13), inset 0 0 10px 1px rgba(0, 147, 255, 0.6);

    .el-select-dropdown__item,
    .el-select-dropdown__item.selected {
      color: $text-color1;

      &:hover {
        background-color: $bg-color4;
      }
    }

    .el-select-dropdown__item.is-disabled {
      color: $text-color3;
    }

    .el-select-dropdown__item.hover {
      background-color: $bg-color4;
    }

    .el-select-dropdown__item.selected {
      color: $text-color1;
      background-color: $bg-color4;
    }

    .el-select-dropdown__item.selected.hover {
      background-color: $bg-color4;
    }
  }

  .el-pagination .el-input__inner {
    border: 1px solid #888eae;
    border-color: $nborder-color1; // $border-color1;
    border-radius: 3px;
  }

  .el-select {
    .el-input.is-disabled {
      .el-input__inner {
        background-color: $dis-bg-color1;
        color: $text-color2;
        border-color: $nborder-color1; // $border-color1;

        &:hover {
          background-color: $dis-bg-color1;
          color: $text-color2;
          border-color: $border-color1;
        }
      }
    }

    .el-tag {
      // background-color: $input-tag1;
    }

    .el-tag--info {
      color: $text-color1;
    }

    .el-icon-close {
      background: $bg-color2;
    }
  }

  .el-switch__label.is-active {
    span {
      color: $btn-color2;
    }
  }

  .el-switch__label {
    color: $text-color2;
  }

  // 联动选择 输入框
  .el-cascader {
    .el-cascader__label {
      color: $text-color1;
    }

    .el-input__inner {
      height: 48px;
    }
  }

  // radio 单选
  .el-radio {
    color: $text-color1;

    .el-radio__input.is-disabled {
      .el-radio__inner {
        background-color: $text-color1;
      }
    }

    .el-radio__input.is-disabled.is-checked {
      .el-radio__inner {
        &::after {
          background-color: $disabled-text-color1;
        }
      }
    }

    .el-radio__inner {
      background-color: $other-color1;
      background-color: transparent;
      width: 12px;
      height: 12px;
    }

    .el-radio__input.is-checked {
      .el-radio__inner {
        border-color: #409eff;
        background: #409eff;
      }
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #409eff;
    }
  }

  .el-radio.is-bordered.is-checked {
    border-color: #409eff;
  }

  .el-radio.is-bordered {
    border-color: $border-color1;
  }

  .el-radio-button:first-child .el-radio-button__inner {
    border-color: $border-color1;
  }

  // 单选框组
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: $btn-color;
    border-color: $border-color1;
  }

  .el-radio-button__inner {
    background-color: $bg-color1;
    border-color: $border-color1;
    color: $other-color1;

    &:hover {
      color: $text-color1;
    }
  }

  .el-checkbox {
    color: $text-color2;
  }

  // 下拉 联动选择
  .el-cascader-menus {
    background: $bg-color2;
    border-color: $other-border-color;

    .el-cascader-menu {
      background-color: transparent;
      border-color: $other-border-color;
    }

    .el-cascader-menu__item {
      color: $text-color2;

      &:hover,
      &:focus:not(:active) {
        background-color: $bg-color1;
      }
    }

    .el-cascader-menu__item.is-active {
      background-color: $bg-color3;
      color: $text-color1;
    }
  }

  .el-cascader-menu {
    overflow: auto;
    color: $text-color2;
    background: $bg-color2;
    border-color: $other-border-color;

    .el-cascader-menu__wrap {
      overflow: auto;
    }

    .el-cascader-node.is-selectable.in-active-path {
      color: $text-color1;
    }

    .el-cascader-node:not(.is-disabled):focus,
    .el-cascader-node:not(.is-disabled):hover {
      // background-color: #3D4050
    }
  }

  // date 日期下拉
  .el-picker-panel {
    // background-color: $nbg-color4;
    border: 1px solid $other-border-color;
    border-color: $nborder-color1;
    // box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.13), inset 0 0 10px 1px rgba(0, 147, 255, 0.6);
    color: $text-color1;

    .el-picker-panel__icon-btn {
      color: $text-color2;
    }

    .el-date-range-picker__header {
      .is-disabled {
        color: $disabled-text-color1;
      }
    }

    .el-date-picker__header {
      .el-date-picker__header-label {
        color: $text-color1;
      }
    }

    .el-date-picker__header--bordered {
      // border-bottom: $other-btn-border;
    }

    .el-picker-panel__content {
      table {
        th {
          color: $text-color2;
          border-bottom: $other-btn-border;
          border-color: $border-color1;
        }

        .cell {
          color: $text-color1;
        }

        .disabled {
          .cell,
          div {
            color: $other-color1;
            background-color: $date-dis-color;
          }
        }

        .start-date,
        .end-date {
          div {
            background-color: $date-range-color;
          }
        }

        .in-range {
          div {
            background-color: $date-range-color;
            // background-color: #3D4050;
          }
        }
      }
    }

    .el-date-range-picker__content.is-left {
      border-right: $other-btn-border;
    }

    .el-date-range-picker__time-header {
      border-bottom: $other-btn-border;

      .el-icon-arrow-right {
        color: $text-color1;
      }

      .el-input__inner {
        // background-color: $bg-color1;
        background-color: $nbg-color1;
        border-color: $nborder-color1; // $date-input-bg;
        color: $text-color1;
      }
    }

    // footer
    .el-picker-panel__footer {
      background-color: $bg-color1;
      // border-top: $other-btn-border;

      .el-button {
        background: $bg-color1;
        // border: 1px solid #DCDFE6;
        // border-color: $text-color2;
      }

      .el-button--text {
        padding-left: 8px;
        padding-right: 8px;
      }

      .el-button.is-disabled {
        background-color: $bg-color1;
        border-color: $text-color3;
        color: $text-color3;
        &.el-button--text {
          border: none;
        }

        &:hover {
          background-color: $bg-color1;
          border-color: $text-color3;
          color: $text-color3;
        }
      }
    }
  }

  // 关联的 日期下拉选择
  .el-range-editor {
    .el-range-input {
      background-color: $bg-color1;
      color: $text-color1;
    }

    .el-range-separator {
      color: $text-color1;
    }
  }

  // time 关联的 时间下拉选择
  .el-time-panel {
    background-color: $bg-color3;
    border-color: $bg-color3;

    .el-time-panel__content {
      &::after,
      &::before {
        border-top-color: $date-range-color;
        border-bottom-color: $date-range-color;
      }

      .el-time-spinner__item {
        color: $text-color1;

        &:hover:not(.disabled):not(.active) {
          background-color: $bg-color3;
        }

        .active:not(.disabled) {
          color: $text-color3;
        }
      }
    }

    .el-time-panel__footer {
      border-bottom-color: $date-range-color;
      border-top-color: $date-range-color;

      .cancel {
        color: $text-color3;
      }
    }
  }

  // time 时间下拉
  .time-select {
    .time-select-item {
      &:hover {
        background-color: $bg-color2;
      }
    }

    .is-vertical {
      background: #505d92;

      .el-scrollbar__thumb {
        background-color: #b4eeff;
      }
    }
  }

  // 主样式 按钮
  .el-button--primary {
    background-color: $btn-color;
    border-color: $btn-color;
    color: #fff;
  }

  // text 按钮
  .el-button--text {
    color: $text-color2;
  }

  // plain 按钮
  .el-button--primary.is-plain {
    color: #fff;
    background: $btn-color;
    border-color: $btn-color;
  }

  .el-button--primary.is-plain.is-disabled {
    background-color: $border-color1;

    &:hover {
      background-color: $border-color1;
    }
  }

  .el-button.is-plain {
    &:active,
    &:hover {
      background-color: transparent;
      color: $text-color1;
      border-color: #80828d;
    }
  }

  // 默认按钮
  .el-button--default {
    border: 1px solid #dcdfe6;
    color: $text-color1;
    border-radius: 2px;

    &:hover,
    &:focus {
      background-color: transparent;
      color: $text-color1;
    }

    // color: #fff;
    background-color: transparent;
  }

  .el-button.is-disabled {
    color: $other-color1;
    background-color: transparent;
    border-color: $other-color1;

    &:focus,
    &:hover {
      color: $other-color1;
      background-color: transparent;
      border-color: $other-color1;
    }
  }

  // // input
  // .el-input__inner::placeholder {
  //   color: $ntext-color2;
  // }
  // /* 谷歌 */
  // .el-input__inner::-webkit-input-placeholder {
  //   color: $ntext-color2;
  // }
  // /* 火狐 */
  // .el-input__inner:-moz-placeholder {
  //   color: $ntext-color2;
  // }
  .el-input__inner {
    // background-color: $bg-color1;
    background-color: $nbg-color1;
    color: $text-color1;
    border-color: $nborder-color1; // $border-color1;

    &:focus {
      border-color: $border-color1;
    }
  }

  .el-input__inner,
  .el-textarea__inner {
    &::placeholder {
      color: #6c7088;
    }
  }

  .el-input.is-disabled {
    .el-input__inner {
      background-color: $dis-bg-color1;
      color: $text-color2;
      border-color: $nborder-color1; // $border-color1;

      &:hover {
        background-color: $dis-bg-color1;
        color: $text-color2;
        border-color: $border-color1;
      }
    }
  }

  // input number
  .el-input-number {
    .el-input-number__decrease {
      color: $text-color2;
      border-color: $bg-color1;
      // background-color: $date-dis-color;

      .is-disabled {
        color: $disabled-text-color1;
      }
    }

    .el-input-number__increase {
      color: $text-color2;
      border-color: $bg-color1;
      // background-color: $date-dis-color;
    }
  }

  .el-textarea__inner {
    // background-color: $nbg-color1;
    // background: #333647;
    color: $text-color1;
    border-color: $nborder-color1;
    color: #333;

    &:focus {
      border-color: $nborder-color1;
    }

    // background-color: $nbg-color1;
    // color: $text-color1;
    // border-color: $nborder-color1; // $border-color1;
  }

  // switch
  .el-switch {
    .el-switch__core {
      background-color: $disabled-text-color1;
      border-color: $disabled-text-color1;
    }
  }

  // dialog 弹出窗
  .el-dialog__wrapper {
    .el-dialog {
      // background-color: #2A2D3E;
      // border: 1px solid $text-color3;
      // box-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
      .el-dialog__header {
        background-color: $bg-color4;
      }
    }

    .el-dialog.is-fullscreen {
      background-color: rgba(26, 43, 76, 1); // #383e56;
      border: none;
      // box-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
      box-shadow: none;
    }

    .el-dialog__title {
      color: $text-color1;
    }

    .el-dialog__close {
      color: $text-color2;
    }

    .el-dialog__body {
      padding: 12px 24px 8px;
      color: $text-color1;

      .el-form-item__label {
        font-size: 14px;
        // color: #888EAE;
        line-height: 32px;
      }
    }

    .el-dialog__headerbtn {
      &:hover {
        .el-dialog__close {
          color: $text-color2;
        }
      }
    }
  }

  // form label
  .el-form-item {
    margin-bottom: 12px;
  }

  .el-form-item__label {
    color: $text-color1;
    font-weight: 500;
    font-size: 16px;
    // color: #888EAE;
    margin: 0;
    padding: 0 12px 0 0;
    line-height: 48px;
  }

  // tabs 切换选项卡
  .el-tabs--card {
    .el-tabs__header {
      background: #f5f7fa;
      height: 56px;
      border: none;

      .el-tabs__nav-wrap .el-tabs__nav {
        height: 56px;
        border: none;

        .el-tabs__item {
          border: none;
          height: 56px;
          line-height: 56px;
          width: 120px;

          &.is-active {
            background-color: #fff;
          }
        }
      }
    }
  }

  .el-tabs {
    background: #fff;

    .el-tabs__nav-wrap {
      padding: 0 16px;
    }

    .el-tabs__nav-scroll {
      height: 100%;
      // margin-top: 6.5px;
      // border: none;

      .el-tabs__nav {
        .el-tabs__item {
          font-size: 16px;
          // color: $text-color1;
          font-weight: 500;
          text-align: center;

          &:hover,
          &:active {
            color: #409eff;
          }
        }

        .is-active {
          // color: $text-white;
        }

        .el-tabs__active-bar {
        }
      }
    }

    .el-tabs__item,
    .el-tabs__item.is-active {
      &:hover {
        // color: $text-color1;
      }
    }

    .el-tabs__content {
      height: calc(100% - 40px);
      color: $text-color1;
      // height: calc(100% - 70px);
      width: calc(100% - 20px);
      margin: 0 10px;
    }

    .el-tabs__nav-wrap {
      &::after {
        // background-color: transparent;
      }
    }

    .el-tabs__active-bar {
    }
  }

  // .el-tabs--border-card {
  //   background-color: $bg-color2;
  //   border-color: $border-color1;
  //   box-shadow: 0 2px 4px 0 rgba(250, 249, 249, 0.12), 0 0 6px 0 rgba(255, 255, 255, 0.04);
  //   .el-tabs__header {
  //     background-color: $bg-color1;
  //     border-color: $border-color1;
  //     .el-tabs__item.is-active {
  //       color: $text-color1;
  //       background-color: $bg-color1;
  //       border-left-color: $bg-color1;
  //       border-right-color: $bg-color1;
  //     }
  //     .el-tabs__item {
  //       color: $text-color2;
  //     }
  //   }
  // }
  // 步骤条
  .el-steps {
    .el-step__head.is-process {
      color: $bg-color2;
      border-color: $text-color5;
    }

    .el-step__title.is-process {
      color: $text-color1;
    }

    .el-step__description.is-process {
      color: $text-color2;
    }

    .el-step__icon.is-text {
      top: -8px;
    }
  }

  .task-steps {
    .el-step__icon.is-text {
      top: 0;
    }
  }

  // 卡片
  .el-card {
    background-color: #fff;
    border-color: $other-border-color;
    border: none;
    color: $text-color1;

    .header-container {
      background-color: $bg-color4;

      .subtitle {
        color: $text-color2;
      }
    }

    .el-card__header {
      border-color: $other-border-color;
    }

    .el-card__body {
      padding: 16px;
      padding-bottom: 0;

      .device-list {
        background-color: $bg-color1;
      }

      .device-list:nth-child(odd) {
        background-color: #383e56;
      }
    }
  }

  // .tooltip-wrapper {
  //   .el-card {
  //     .el-card__body {
  //       padding-bottom: 0;
  //     }
  //   }
  // }

  // .chart-wrapper {
  //   .el-card {
  //     .el-card__body {
  //       padding-top: 0 !important;
  //     }
  //   }
  // }

  // 按钮关联弹出卡
  .el-popover {
    background-color: $nbg-color4; // $bg-color1;
    border-color: $other-border-color;
  }

  // 小提示
  .el-tooltip__popper.is-dark {
    background-color: $other-border-color;
    color: $text-color1;
  }

  .el-tooltip__popper[x-placement^='right'] .popper__arrow {
    border-right-color: $other-border-color;

    &:after {
      border-right-color: $other-border-color;
    }
  }

  // 提示弹窗
  .el-message-box {
    .el-message-box__title {
      color: #fff;
    }
  }

  // 删除确认
  .el-message-box__wrapper {
    .el-message-box {
      padding: 0;
      // background-color: #2A2D3E; // #383e56;
      border: none;

      .el-message-box__close {
        color: #fff;
      }

      .el-message-box__header {
        background-color: $nbg-color2; // #383e56;
        padding: 0 0 0 16px;

        .el-message-box__title {
          font-size: 16px;
          line-height: 48px;
          color: #ffffff;
        }
      }

      .el-message-box__btns {
        border-top: 1px solid $border-color1;
        padding-top: 8px;
        padding-bottom: 12px;

        .el-button--primary {
          background-color: $btn-color;
          background: #3e8ef7;
          border-color: $btn-color;
          color: #fff;
        }

        .el-button--small {
          width: 72px;
          height: 36px;
        }
      }

      .el-message-box__content {
        padding-top: 20px;
        color: $text-color1;
        // padding: 20px;
        min-height: 90px;

        .el-message-box__status {
          top: 30px;
        }

        .el-message-box__message {
          font-size: 16px;
        }
      }
    }
  }

  // el-tree 树
  .el-tree {
    background-color: transparent;
    color: $text-color1;

    .el-tree-node {
      // height: 56px;
      // border-radius: 6px;
      &:focus {
        .el-tree-node__content {
          background-color: $nbg-color3; // $bg-color4;
          // background-image: linear-gradient(270deg, #6AC1FF 0%, #3796FB 100%);
          // box-shadow: inset 0 0 15px rgba(0, 149, 255, 0.9);
        }
      }

      .el-tree-node__content {
        &:hover {
          background-color: $nbg-color3; // $bg-color3;
          background-image: linear-gradient(270deg, #6ac1ff 0%, #3796fb 100%);
          // box-shadow: inset 0 0 15px rgba(0, 149, 255, 0.9);
        }
      }
    }

    .el-tree-node.is-current {
      > .el-tree-node__content {
        font-weight: 600;
        background-image: linear-gradient(270deg, #6ac1ff 0%, #3796fb 100%);
      }

      .el-tree-node__content {
        background-color: $nbg-color3; // $bg-color4;
        // background-image: linear-gradient(270deg, #6AC1FF 0%, #3796FB 100%);
        // box-shadow: inset 0 0 15px rgba(0, 149, 255, 0.9);

        &:hover {
          background-color: $nbg-color3; // $bg-color3;
          // background-image: linear-gradient(270deg, #6AC1FF 0%, #3796FB 100%);
          background-image: linear-gradient(270deg, #6ac1ff 0%, #3796fb 100%);
          // box-shadow: inset 0 0 15px rgba(0, 149, 255, 0.9);
        }
      }

      .el-tree-node__children {
        .el-tree-node__content {
          // background-color: rgba(44, 16, 16, 0.5);
          box-shadow: none;

          &:hover {
            // background-color: $nbg-color3; // $bg-color3;
            background-image: linear-gradient(270deg, #6ac1ff 0%, #3796fb 100%);
            // box-shadow: inset 0 0 15px rgba(0, 149, 255, 0.9);
          }
        }
      }
    }
  }

  .tree-list-box {
    .el-tree {
      color: $text-color1;
      font-size: 14px;

      .el-tree-node__content {
        height: 56px;
        line-height: 56px;
        border-radius: 6px;
      }
    }
  }

  // el-switch
  .el-switch.is-checked {
    .el-switch__core {
      border-color: $nbg-color2;
      background-color: $nbg-color2;
    }
  }

  // table 表格
  .el-table {
    background-color: $bg-color1;
    // border: 1px solid #5185A3;

    &::before {
      background-color: $bg-color1;
    }

    tr {
      // background-color: #373B4E;
      // border: 1px solid $border-color1;W
      height: 56px;
    }

    td {
      border-bottom: 1px solid $nborder-color2;
    }

    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      background-color: $bg-color4;

      .color-header {
        background-color: $bg-color4;
      }
      th {
        background-color: $bg-color4;
        border-right: 1px solid $border-color1;
      }

      .cell {
        color: $text-color1;
      }

      .is-leaf {
        border-bottom: none;
      }
    }

    .icon-shuangjiantouyou {
      // color: #00C6FF;
      // margin-right: 10px;
    }

    .el-table__fixed-right {
      &::before {
        background-color: $bg-color1;
      }

      // td {
      //   background: $bg-color1;
      // }
    }

    .el-table__header-wrapper,
    .el-table__body-wrapper {
      .el-table__header {
        tr {
          background-color: $bg-color4;
        }
      }

      .el-table__body {
        // .el-table__row {
        //   height: 56px;

        // }

        tr {
          // background-color: #373B4E;
          // border: 1px solid $border-color1;
          height: 56px;

          // td {
          //   height: 56px;
          // }

          &:hover {
            td {
              background-color: $bg-color4; // 可 $bg-color1;
            }

            .cell {
              color: $text-color1;
            }
          }

          th,
          td {
            height: 56px;
            // box-sizing: border-box;
            // background-color: #2A2D3E;
          }

          .cell {
            color: $text-color1;
          }

          .is-leaf {
            border-bottom: $other-btn-border;
          }

          td {
            // border-bottom: 1px solid $nborder-color2;
            border: 1px solid $border-color1;
          }
        }

        tr.hover-row > td {
          background-color: #f5f7fa;
        }

        .el-table__row--striped {
          // background-color: #2A2D3E;
        }
      }
    }

    .el-table__body {
      tr.hover-row > td {
        background-color: #f5f7fa;
      }
    }

    .el-table__footer-wrapper {
      td {
        background-color: $nborder-color2;
        border-top: 1px solid $nborder-color2;
      }

      .cell {
        color: $text-color1;
      }

      .gutter {
        background-color: $bg-color1;
      }
    }

    .el-loading-mask {
      // background-color: rgba(15, 33, 60, 0.8);
    }

    // td {
    //   border-bottom: 1px solid $border-color1;
    //   background-color: $bg-color1;
    // }
  }

  .el-table--striped {
    .el-table__body tr.el-table__row--striped td {
      // background-color: #2a2d3e;
    }

    // .el-table__fixed-header-wrapper .el-table__body tr.el-table__row--striped td {
    //   background-color: $bg-color1;
    // }
    .el-table__body-wrapper .el-table__body .el-table__row--striped td {
      // background-color: #2a2d3e;
    }
  }

  table {
    border-right: 1px solid $bg-color1;
  }

  // table 分页
  .el-pagination {
    color: $text-color1;

    .el-pagination__total {
      color: $ntext-color3;
    }

    .el-pagination__jump {
      color: $ntext-color3;
    }

    .el-pager {
      color: $text-color2;

      &:hover {
        color: $text-color2;
      }

      li {
        background-color: $bg-color1;

        &:hover {
          color: $btn-color;
        }
      }

      li.active {
        color: #fff;
        background-color: $nbg-color2;
        border-radius: 3px;
      }

      .btn-quickprev,
      .btn-quicknext {
        color: $ntext-color3;
      }
    }

    button {
      background-color: $bg-color1;
      color: $text-color1;

      // border: $other-btn-border;
      &:disabled {
        background-color: $bg-color1;
      }
    }

    .btn-next,
    .btn-prev {
      &:hover {
        color: $text-color1;
      }

      background-color: $bg-color1;
      color: $ntext-color3;
      // border: $other-btn-border;
    }
  }

  // 进度条 文字
  .el-progress__text {
    color: $text-color2;
  }

  // 表格插件
  .handsontable {
    color: $text-color2;

    th,
    td {
      background-color: #fff;

      .colHeader {
        color: $text-color1;
      }
    }

    tr {
      background-color: $bg-color1;

      th {
        color: $text-color1;
      }
    }

    .handsontableInputHolder {
      .handsontableInput {
        background-color: $bg-color4;
        color: $text-color1;
      }
    }

    .listbox {
      tr,
      td {
        &:hover {
          td {
            background-color: $bg-color3;
          }
        }

        .current {
          background-color: $bg-color4;
        }
      }
    }

    .htUISelectCaption {
      background-color: $bg-color4;

      &:hover {
        background-color: $bg-color4;
      }
    }

    .htFiltersMenuCondition,
    .htFiltersMenuValue {
      input {
        background-color: $bg-color1;
        color: $text-color2;
      }
    }

    .htUIMultipleSelect {
      .handsontable {
        .htCore {
          td {
            &:hover {
              background-color: $bg-color4;
            }
          }
        }
      }
    }

    .wtSpreader {
      th {
        background-color: $text-color3;
      }

      .ht__highlight {
        background-color: $other-color-much-stab;
      }
    }
  }

  // 表格 头的下拉菜单框
  .htDropdownMenu,
  .htContextMenu {
    table {
      tr {
        .htDisabled {
          &:hover {
            background-color: $bg-color4;
          }
        }

        td.htCustomMenuRenderer {
          background-color: $bg-color3;
        }

        td.current {
          background-color: $bg-color4;
        }
      }
    }
  }

  // 表格 悬浮菜单
  .htFiltersConditionsMenu {
    table {
      tr {
        .current,
        .zeroclipboard-is-hover {
          background-color: $bg-color3;
        }
      }
    }
  }

  // 导航
  .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
  .sidebar-container .el-submenu .el-menu-item {
    min-width: 180px !important;
    background-color: $subMenuBg !important;

    &:hover {
      background-color: $menuHover !important;
    }
  }

  // 公式的tag
  .formulaValidate,
  .textarea-container {
    .el-tag {
      background-color: #bef0f21a;
      color: #c8cfee;
      border-color: #6684f733;
    }

    .el-tag--warning {
      background-color: rgba(230, 162, 60, 0.1);
      border-color: rgba(230, 162, 60, 0.2);
      color: #e6a23c;
    }

    .el-tag--success {
      background-color: rgba(103, 194, 58, 0.1);
      border-color: rgba(103, 194, 58, 0.2);
      color: #67c23a;
    }
  }

  // 输入框+按钮 组合框
  .el-input-group__append {
    background-color: $date-select-color2;
    color: #fff;
    // border-left: $other-btn-border;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
  }

  // loading 加载动效
  .el-loading-mask {
  }

  .el-loading-spinner {
    .path {
      stroke: $btn-color;
    }
  }

  // 登出弹窗
  .el-dropdown-menu {
    background-color: $nbg-color4; // $bg-color1;
    border-color: $other-border-color; // $bg-color1;

    .el-dropdown-menu__item--divided {
      &:before {
        background-color: $nbg-color3; // $bg-color1;
      }

      border-color: $other-border-color;
    }

    .el-dropdown-menu__item {
      color: $text-color2;

      &:hover {
        color: $text-color1;
        background-color: $nbg-color3; // $border-color1;
      }
    }
  }

  // 左项目树 右数据显示 框架样式
  .layout-tree-detail-container,
  .l-tree-d-container-style {
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;

    // 左树
    .left-project-tree-list {
      width: 300px;
      height: 100%;
      // overflow-y: auto;
      border-radius: 0;
      position: relative;
      // margin-right: 20px;
      transition: margin-left ease 1s;

      // 悬浮控制小按钮
      .control-fold-btn {
        position: absolute;
        right: -15px;
        top: 42%;
        z-index: 50;
        margin: 0 0;
        width: 14px;
        height: 100px;
        cursor: pointer;
        padding: 40px 0;
        color: #888888;
        vertical-align: middle;
        // border: 1px solid #13679A;
        border-left: none;
        background: #ffffff;
        border-radius: 0px 50px 50px 0px;

        .fold-icon {
          font-size: 16px;
          margin-left: -1px;
        }
      }
    }

    .tree-hidden {
      margin-left: -300px;
    }

    // 右数据
    .right-detail-box {
      width: calc(100% - 300px);
      height: 100%;
      // margin-left: 20px;
      transition: width ease 1s;
      // padding: 10px 15px 10px 0px;
      padding-bottom: 10px;
    }

    .fill-width {
      width: 100%;
      width: calc(100% - 20px);
    }
  }

  // 数据源 样式
  .l-tree-d-container-style {
    .box-fill-width {
      margin-left: 20px;
    }

    .title-box {
      height: 50px;
      display: flex;
      padding: 0 10px;
      justify-content: space-between;

      // background-image: linear-gradient(to bottom, #37ABE5, #266691);
      .t-left-btn-box {
        display: flex;
      }

      .t-l-btn {
        height: 48px;
        margin: 0 15px;
        color: #82ccff;
        font-size: 14px;
        cursor: pointer;
        // line-height: 38px;
        line-height: 50px;
        // border-radius: 10px 10px 0 0;
        background-color: transparent;
        border-bottom: 2px solid #26669100;
        transition: border-bottom-color ease 0.5s;

        &:hover {
          color: #fff;
          // background-image: linear-gradient(to bottom, #37ABE5, #1b4f72);
        }
      }

      .active-l-btn {
        color: #fff;
        border-bottom-color: $text-color1;
        // background-image: linear-gradient(to bottom, #37ABE5, #1b4f72);
      }
    }

    .panel-box {
      height: calc(100% - 42px);

      .variable-panel {
        height: 100%;
        padding: 10px;
      }
    }
  }

  // 左树右展示解构界面 right 内容共用
  .tree-right-detail-box {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    .table-wrapper {
      margin-bottom: 20px;
    }
  }

  .cardDetailBox {
    box-shadow: 0px 0px 5px gary;
    background-color: #fff;
    margin: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }

  .tree-right-detail-container {
    height: 100%;
    width: 100%;
    // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

    .top-title-box {
      height: 32px;
      display: flex;
      padding: 0 10px;
      align-items: center;
      justify-content: space-between;
      // margin: -1px -1px 10px -1px;
      border-bottom: 1px solid #4e5166;

      .top-title {
        height: 32px;
        line-height: 32px;
        margin: -1px -1px 0 0;
        padding: 0 10px;
        //  ;
        font-size: 14px;
        color: $text-color1;
        font-weight: 400;

        .vertical-line {
          border-left: 3px solid #76c8ff;
          margin-right: 10px;
        }
      }

      .refresh-button {
        color: #a8f5f2;
      }
    }

    .content-box-container {
      padding: 10px;
      height: calc(100% - 60px);
    }
  }

  // 卡片列表 切换样式
  .t-right-show-change {
    display: flex;
    align-items: center;

    .p-btn {
      height: 25px;
      margin: auto 0;
      color: #6097cf;
      padding: 0 15px;
      cursor: pointer;
      font-size: 14px;
      line-height: 25px;
      background: transparent;
      border: 1px solid #215674;

      .iconfont {
        font-size: 14px;
      }
    }

    .p-btn1 {
      border-radius: 5px 0 0 5px;
    }

    .p-btn2 {
      line-height: 20px;
      border-radius: 0 5px 5px 0;
    }

    .active-p-btn {
      color: #fff;
      background: $nbg-color2;
    }
  }

  // ==========工程页面蓝色tab选项卡顶部样式=================
  // .project-page-design, .api--ds-container {
  //   .el-tabs__nav-wrap {
  //     // background: linear-gradient(180deg,rgba(55,171,229,1) 0%,rgba(38,102,145,1) 100%);
  //     background: $bg-color1;
  //     padding-left:20px;
  //     height:50px;
  //   }
  //   .el-tabs__nav-scroll{
  //     margin-top:6.5px;
  //     .el-tabs__nav{
  //       .el-tabs__item{
  //         color:#82CCFF;
  //         &:hover, &:active{
  //           color: $text-white;
  //         }
  //       }
  //       .is-active{
  //         color: $text-white;
  //       }
  //       .el-tabs__active-bar{
  //         background-color:$text-white !important;
  //       }
  //     }
  //   }
  // }

  // ==========告警页面对话框头部样式修改==========
  .alarm-design {
    .el-dialog {
      .el-dialog__header {
        width: 100%;
        height: 56px;
        // background-color: #36394C;

        // background:linear-gradient(180deg,rgba(55,171,229,1) 0%,rgba(38,102,145,1) 100%);
        .el-dialog__title {
          font-size: 18px;
          font-weight: 500;
          color: $text-color1;
        }

        .el-dialog__headerbtn {
          .el-dialog__close {
            color: $text-color1;
          }
        }
      }
    }
  }

  // api数据源下方表格
  .bottom-tab {
    height: 280px;
    min-height: 270px;
    overflow-y: auto;

    .el-tabs--top {
      height: 100%;

      .el-tabs__content {
        height: 250px !important;

        #pane-vars {
          height: 100%;
        }
      }
    }
  }

  // =========部分页面右边大部分添加边框===========
  //
  .layout-tree-detail-container {
    .right-detail-box {
      height: 100%;
      width: 100%;
      padding-bottom: 0;

      .tree-right-detail-container {
        // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

        .content-box-container {
          height: calc(100%-85px);

          .el-table__body-wrapper {
            height: 620px;
          }
        }
      }
    }
  }

  //========echarts图表宽度修改===========
  .charts-box {
    height: 300px;
    width: 100%;
    padding-top: 20px !important;
    margin-bottom: 20px !important;
    min-width: 1255px;

    .echarts {
      height: 100%;
      width: 100%;

      div:nth-of-type(1) {
        height: 100%;
        width: 100% !important;

        canvas {
          height: 100%;
          width: 100% !important;
        }
      }
    }
  }

  .chart-box {
    .echarts {
      height: 100%;
      width: 100%;

      div:nth-of-type(1) {
        height: 100%;
        width: 100% !important;

        canvas {
          height: 100%;
          width: 100% !important;
          padding-right: 30px !important;
        }
      }
    }
  }

  .content-box-container {
    .spec-box {
      min-width: 1255px;
    }
  }

  // ------------------------- 定制 --------------------------
  .top-title-box {
    height: 48px;
    display: flex;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;

    .refresh-button {
      color: #a8f5f2;
    }
  }

  .top-title {
    height: 48px;
    line-height: 48px;
    margin: -1px -1px 0 0;
    //  ;
    font-size: 18px;
    color: $text-color1;
    font-weight: 400;

    .icon-shuangjiantouyou {
      display: none;
    }
  }

  // 注塑机部分 弹窗 可换行form
  .newline-form {
    display: flex;
    flex-wrap: wrap;

    .info-form-item {
      width: 50%;
    }

    .form-item-btn {
      width: 100%;
    }
  }

  // 404
  .wscn-http404-container {
    .wscn-http404 {
      .bullshit__headline {
        color: $text-color1;
      }
    }
  }

  //dialog视频内部操作按钮
  .el-dialog {
    .direction_contrl {
      float: right;
      width: 200px;
      height: 390px;
      margin-top: 10px;

      span {
        width: 200px;
        border: 1px solid rgb(168, 167, 167);
        height: 20px;
        border-radius: 10px;
        padding: 10px 68px;
        margin-bottom: 15px;
      }

      .btn_box {
        width: 200px;
        height: 180px;
        padding: 10px 20px;
        padding-left: 15px;

        button {
          height: 48px;
          width: 40px;
          border-radius: 50%;
          padding: 0px 10px;
          text-align: center;
          line-height: 48px;
          float: left;
          margin-top: 10px;
          margin-left: 10px;
        }
      }

      .small_contrl {
        height: 150px;
        width: 200px;

        .top_btn {
          width: 100px;
          margin: 10px auto;
          height: 48px;
          padding-top: 20px;

          button {
            height: 48px;
            width: 40px;
            border-radius: 50%;
            padding: 0px 10px;
            text-align: center;
            line-height: 48px;
          }
        }

        .line {
          border-bottom: 1px solid rgb(168, 167, 167);
          padding-top: 20px;
          width: 96px;
          margin-left: 50px;
        }

        .btm_btn {
          width: 100px;
          margin: 10px auto;
          height: 48px;

          button {
            height: 48px;
            width: 40px;
            border-radius: 50%;
            padding: 0px 10px;
            text-align: center;
            line-height: 48px;
          }
        }
      }
    }

    .m-t-control {
      margin-top: 100px;
    }
  }

  // 地图弹窗格式定制   ----监控中心弹窗
  .gis-map-container {
    .map-info-window-container {
      .info-window-container {
        width: 300px;

        .info-item {
          width: 100%;
          margin: 5px 0 15px 0;
        }

        .item-title {
          line-height: 35px;
          font-size: 16px;
          color: $text-white;
          text-align: center;
          border-radius: 5px;
          padding-left: 10px;
          // background: rgb(20, 92, 207);
          background: linear-gradient(to right, #81b1ff, #0f65f4, #81b1ff);
        }

        .info-img-box {
          width: 100%;
          height: 140px;
          border-radius: 5px;
          background: aliceblue;
          box-shadow: 0 0 5px 0 #9ca8ff82;

          .item-img {
            height: 100%;
            width: 100%;
            max-height: 100%;
            border-radius: 5px;
          }
        }

        .map-icon {
          color: #4285f4;
        }

        .introduction-box {
          display: flex;

          p {
            margin: 0 0;
          }
        }

        .i-i-introduction {
          width: calc(100% - 60px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .i-i-label {
          width: 60px;
        }

        .btn-box {
          margin: 15px 0;
          text-align: center;
        }

        .details-btn {
          padding: 7px 12px;
          color: $text-white;
          background-color: #1f9fff;
          border: 1px solid #1f9fff;

          &:hover,
          &:active,
          &:focus {
            color: $text-white;
            background-color: rgb(77, 187, 238);
            border: 1px solid #1f9fff;
          }
        }
      }

      width: 340px;
    }
  }

  // =================== 暖通 ======================
  // tabs
  .hvac-tabs {
    .el-tabs__content {
      height: calc(100% - 80px); //这里原来是80，会影响设备管理页面的下方信息部分的高度
    }
  }

  .host-list-tabs {
    .el-tabs__content {
      height: calc(100% - 65px);
    }
  }

  .hhvac-tabs-device {
    .el-tabs__content {
      height: calc(100% - 70px);
    }
  }

  // 暖通left项目树样式
  .left-project-tree-list {
    width: 300px;
    height: 100%;
    border-radius: 5px;
    // box-shadow: 0 0 5px #a3bddbb2;
    // &:hover {
    //   box-shadow: 0 0 5px #a3bddb;
    // }
  }

  .logical-process {
    .right-container {
      .el-input__inner {
        background-color: $an-bg-color1;
        color: $an-text-color1;
        // border-color: $date-range-color;
        border: none;
      }

      .el-textarea__inner {
        background-color: $an-bg-color1;
        color: $an-text-color1;
        border-color: $an-border-color1;
      }
    }

    .el-tree {
      color: $text-color6;
      font-size: 14px;

      .el-tree-node {
        // &:focus {
        //   .el-tree-node__content {
        //     background-color: $text-theme1;
        //   }
        // }
        .el-tree-node__content {
          &:hover {
            color: $text-color6;
            background-color: $text-theme1;
          }
        }
      }

      .el-tree-node.is-current {
        .el-tree-node__children {
          .el-tree-node__content {
            // background-color: $text-theme1;
            &:hover {
              color: $text-color6;
              background-color: $text-theme1;
            }
          }
        }
      }
    }

    .el-tree-node__expand-icon {
      color: $main-color;
    }

    .data-source-s-tree {
      .el-tree-node {
        min-width: fit-content;
      }
    }

    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      color: $text-color6;
      background-color: $text-theme1;
      height: 40px;

      .t-node-icon {
        color: $text-color6;
      }
    }

    .el-tree-node__content {
      height: 30px;

      .expanded {
        color: $main-color;
      }

      .is-leaf {
        color: $text-color6;
      }
    }

    // table
    .el-table {
      background-color: $an-bg-color1;

      &::before {
        background-color: $an-bg-color1;
      }
    }

    .el-table__header-wrapper,
    .el-table__body-wrapper {
      background-color: $an-bg-color1;

      .el-table__body {
        tr {
          background-color: $an-bg-color1;

          &:hover {
            td {
              background-color: $an-bg-color4 !important;
            }

            .cell {
              color: $an-text-color1;
            }
          }

          th,
          td {
            background-color: $an-bg-color1;
          }

          .cell {
            color: $an-text-color4;
          }

          .is-leaf {
            border-bottom: $an-other-btn-border;
          }

          td {
            border-bottom: 1px solid $an-border-color1;
          }
        }
      }
    }

    .node-edit-form {
      // form label
      .el-form-item__label {
        color: #9eb2d9;
      }
    }

    // input number
    .el-input-number {
      .el-input-number__decrease {
        color: $an-text-color2;
        border-color: $an-bg-color1;
        border: none;
        // background-color: $an-date-dis-color;

        .is-disabled {
          color: $an-disabled-text-color1;
        }
      }

      .el-input-number__increase {
        color: $an-text-color2;
        border-color: $an-bg-color1;
        // background-color: $an-date-dis-color;
      }
    }

    // treeSelect
    .vue-treeselect {
      .vue-treeselect__control {
        border: 1px solid $an-bg-color1;
        background: $an-bg-color1;

        .vue-treeselect__single-value {
          color: $an-text-color1;
        }

        .vue-treeselect__multi-value-item {
          color: $an-text-color1;
          background: $an-other-color-much-stab;

          .vue-treeselect__value-remove {
            color: $an-other-color-close;
            border-left: 0px;
          }
        }

        .vue-treeselect__input {
          padding: 0 0;
          border: 0;
          background: none transparent;
        }
      }

      .vue-treeselect__menu-container {
        .vue-treeselect__menu {
          background: $an-bg-color1;
          color: $an-text-color2;
          width: 130%;
          left: -30%;

          label {
            font-weight: 400;
          }
        }

        .vue-treeselect__option--highlight {
          background-color: $an-bg-color2;
        }

        .vue-treeselect__option--selected {
          background-color: $an-bg-color2;
          color: $an-text-color1;

          label {
            font-weight: 600;
          }
        }
      }
    }

    .el-radio {
      color: $an-text-color1;
    }

    // el-select 下拉选择, date 日期选择
    .el-select,
    .el-date-editor {
      .el-input__suffix {
        color: $an-text-color1;
      }

      .el-range-input {
        background-color: $an-bg-color1;
        color: $an-text-color1;
      }

      .el-range-separator {
        color: $an-text-color1;
      }

      .el-tag {
        background-color: $an-input-tag1;
      }

      .el-tag--info {
        color: $an-text-color1;
      }

      .el-icon-close {
        background: $an-bg-color2;
      }
    }

    .el-select {
      .el-input.is-disabled {
        .el-input__inner {
          background-color: $an-bg-color6;
          color: $an-text-color2;
          border-color: $an-border-color1;

          &:hover {
            background-color: $an-bg-color6;
            color: $an-text-color2;
            border-color: $an-border-color1;
          }
        }
      }

      .el-tag {
        background-color: $an-input-tag1;
      }

      .el-tag--info {
        color: $an-text-color1;
      }

      .el-icon-close {
        background: $an-bg-color2;
      }
    }
  }

  // 按钮自定义颜色
  .query-yellow {
    color: $text-white;
    border-color: #f7a115;
    background-color: #f7a115;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: #ffb800;
    }
  }

  .add-purple {
    color: $text-white;
    border-color: #c227c1;
    background-color: #c227c1;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      border-color: #c227c1;
      background-color: #c227c1;
      // background-color: rgb(3, 179, 0);
    }
  }

  .reset-green {
    color: $text-white;
    border-color: #0bbc07;
    background-color: #0bbc07;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: rgb(3, 179, 0);
    }
  }

  .reset-green2 {
    color: $text-white;
    border-color: #35ac90;
    background-color: #35ac90;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: #0aad87;
    }
  }

  .add-child-blue {
    color: $text-white;
    border-color: #40b5e6;
    background-color: #40b5e6;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: #32d1db;
    }
  }

  .btn-blue-color1 {
    color: $text-white;
    border-color: #3d94dd;
    background-color: #3d94dd;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: #1782da;
    }
  }

  .btn-blue-color2 {
    color: $text-white;
    border-color: $nbg-color2;
    background-color: $nbg-color2;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: #1aadda;
    }
  }

  .edit-primary-blue {
    color: $text-white;
    border-color: #3897ff;
    background-color: #3897ff;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: #1f9fff;
    }
  }

  .click-chose-type {
    color: $text-white;
    border-color: rgb(143, 148, 253);
    background-color: rgb(143, 148, 253);

    &:hover {
      color: $text-white;
      background-color: rgb(175, 179, 252);
    }

    &:focus {
      color: $text-white;
      background-color: rgb(175, 179, 252);
    }
  }

  .add-blue-green {
    color: $text-white;
    border-color: #33ab9f;
    background-color: #33ab9f;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: rgb(33, 156, 144);
    }
  }

  .delete-orange {
    color: $text-white;
    border-color: #ff5722;
    background-color: #ff5722;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: rgb(245, 75, 23);
    }
  }

  .delete-red {
    color: $text-white;
    border-color: #ff3838;
    background-color: #ff3838;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: #ff5722;
    }
  }

  .info-rose-red {
    color: $text-white;
    border-color: #fa42c3;
    background-color: #fa42c3;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: rgb(250, 50, 190);
    }
  }

  .info-rose-view {
    color: $text-white;
    border-color: #7998ff;
    background-color: #7998ff;

    &:hover,
    &:active,
    &:focus {
      color: $text-white;
      background-color: rgb(113, 90, 241);
    }
  }

  // 边框样式
  // 主要大box
  .custom-main-bg-box-shadow1 {
    // border: 2px solid #13679A;
    // background-color: $nbg-color3;
    overflow: hidden;
    // box-shadow: inset 0 0 20px 2px rgba(0, 149, 255, 0.6);
  }

  // 次 box
  .custom-bg-box-shadow1 {
    // border: 2px solid #13679A;
    background-color: $nbg-color3;
    // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2),inset 0 0 20px 2px rgba(0, 149, 255, 0.6);
  }

  .custom-bottom-box-shadow {
    // box-shadow: inset 0px -12px 10px -10px rgba(0, 149, 255, 0.3);
  }

  // 公用距离等样式
  .margin-l-10 {
    margin-left: 10px;
  }

  .margin-r-10 {
    margin-right: 10px;
  }

  .margin-t-10 {
    margin-top: 10px;
  }

  .margin-b-10 {
    margin-bottom: 10px;
  }

  .margin-l-r-10 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .padding-10 {
    padding: 10px;
  }

  .unified-theme-bg-color {
    // background-color: #2A2D3E;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),inset 0 0 10px 2px rgba(0, 149, 255, 0.3);
  }
}

.iconfont {
  margin-right: 5px;

  &::before {
    font-size: 14px;
  }
}
